<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="30%"
    >
      <el-radio-group v-model="radio1">
        <el-radio-button label="单个包裹"></el-radio-button>
        <el-radio-button label="分拆多个包裹"></el-radio-button>
      </el-radio-group>
      <div
        style="margin-top:20px"
        v-show="radio1 === '单个包裹'"
      >
        <el-form>
          <el-form-item label="快递公司:">
            <el-input
              style="width:300px;"
              v-model="postName"
              placeholder="请输入快递公司"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递单号:">
            <el-input
              style="width:300px;"
              v-model="postNumber"
              placeholder="请输入快递单号"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="radio1 === '分拆多个包裹'">
        <el-button
          type="text"
          icon="el-icon-plus"
          @click="handleClick"
        >包裹</el-button>
        <el-tabs
          v-model="editableTabsValue"
          type="card"
          closable
          @click="edit"
          @tab-remove="removeTab"
        >
          <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <div>快递公司:{{item.postName}}</div>
            <div>快递单号:{{item.postNumber}}</div>
          </el-tab-pane>
        </el-tabs>

      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="deliver"
        >确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
    <Addpackage
      :visible.sync="showAdd"
      @get="addTab"
      @close-dialog="Closeadd"
    ></Addpackage>
  </div>
</template>

<script>
import Addpackage from "./Addpackage.vue";
import { deliverGoods } from "@/api/api";
export default {
  name: "Delivery", //发货
  components: {
    Addpackage,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    visible1: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: 0,
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true,
      deep: true,
    },
    visible1: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true,
      deep: true,
    },
    id: {
      handler(val) {
        this.orderid = val;
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      orderid: 0,
      showAdd: false,
      radio1: "单个包裹", //选择的页面
      postName: "", //快递的公司
      postNumber: "", //快递的单号
      dialogVisible: false,
      editableTabsValue: "2",
      editableTabs: [],
      tabIndex: 0,
    };
  },
  methods: {
    edit(tab, event) {},
    sure() {
      // this.dialogVisible = false;
      this.$emit("close", false);
    },

    handleClose() {
      this.$emit("close", false);
    },
    handleClick() {
      this.showAdd = true;
    },
    async deliver() {
      let data = {
        postName: this.postName,
        postNumber: this.postNumber,
        id: this.orderid,
      };
      if (this.radio1 === "单个包裹") {
        if (data.postName === "" && data.postNumber === "") {
          this.$message.error("快递信息不能为空");
        } else {
          const res = await deliverGoods(data);
          console.log(res);
          if (res.data.code === 200) {
            this.$message.success("发货成功");
            this.dialogVisible = false;
            this.$emit("close", false);
            this.$emit("doneclose", false);
          } else {
          }
        }
      } else if (this.radio1 === "分拆多个包裹") {
      }
    },

    addTab(data) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "包裹" + newTabName,
        name: data.name,
        postName: data.company,
        postNumber: data.number,
      });
      console.log(this.editableTabs);
      this.editableTabsValue = newTabName;
    },
    Closeadd(data) {
      this.showAdd = false;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>

<style>
</style>